<template>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button type="primary" @click="$router.go(-1)">返回</el-button>
      </div>
      <div class="center">
        <div class="title" style="margin: 20px 0; font-size: 16px; font-weight: bold;">基本信息</div>
        <el-form 
        :inline="true" 
        :model="formData" 
        class="demo-form-inline" 
        label-width="140px" 
        :disabled="type=='detail'" 
        style="display: flex; justify-content:flex-start;flex-wrap: wrap;width: 90%;margin: 0 auto;"
        >
          <el-form-item label="单据编号">
            <el-input v-model="formData.orderNumber" placeholder="请输入"></el-input>          
          </el-form-item>

          <el-form-item label="单据类型">
            <el-select v-model="formData.documentType" placeholder="请选择">          
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="单据状态">
            <el-select v-model="formData.stateName" placeholder="请选择">          
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="日期">
            <el-input placeholder="请选择日期" v-model="formData.createdDate" v-if="inputPicker" >
              <template v-slot:suffix>
                <i class="el-icon-date" @click="handleDateIconClick"></i>
              </template>
            </el-input>
            <el-date-picker v-model="formData.createTime" type="datetime" placeholder="请选择日期" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" v-if="showDatePicker" @change="handleDateChange" @blur="showDatePicker = false,inputPicker=true" ref="timePicker"></el-date-picker>
          </el-form-item>
        
          <el-form-item label="备注">
            <el-input v-model="formData.remark" placeholder="请输入" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="bottom">
        <div class="title" style="margin: 20px 0; font-size: 16px; font-weight: bold;">物料信息</div>
        <el-table :data="datalist" style="width: 100%;" class="content-table-item">
         <el-table-column type="index" label="序号" width="50"> </el-table-column>
         <!-- <el-table-column prop="" label="转换类型" align="" width=""></el-table-column> -->
         <el-table-column prop="materialCode" label="物料编码" align="" width=""></el-table-column>
          <el-table-column prop="materialName" label="物料名称" width=""></el-table-column>
          <el-table-column prop="specificationModel" label="规格型号" align="center" width=""></el-table-column>
          <el-table-column prop="batchNumber" label="批号" align="center" width=""></el-table-column>
          <!-- <el-table-column prop="" label="车间" align="center" width=""></el-table-column> -->
          <el-table-column prop="unitOne" label="单位" align="center" width=""></el-table-column>
          <el-table-column prop="conversionQuantity" label="转换数量" align="center" width=""></el-table-column>
          <el-table-column prop="warehouseName" label="仓库" align="center" width=""></el-table-column>
          <!-- <el-table-column prop="" label="库存状态" align="center" width=""></el-table-column> -->
          <!-- <el-table-column prop="" label="入库日期" align="center" width=""></el-table-column> -->
          <el-table-column prop="remark" label="备注" align="center" width=""></el-table-column>
        </el-table>
      </div>
    </el-card>
  </template>
  
  <script>
  export default {
    data() {
      return {
        type:"",
        page:'',
        formData: {
          orderNumber: '',
          inOrOutTypeName: '',
          region:''
        },
        datalist: [],
        showDatePicker:false,
        inputPicker:true,
        pickerOptions: {
          // 可选的日期选择器配置
        }
      }
    },
    mounted() {
      const data = this.$route.params.row
      this.datalist = data.lotAdjustDetailList;
      console.log(data, '=====')
      this.type = this.$route.params.type;
      console.log(this.type,'=====');
      this.formData=data
    },
    methods: {
      //时间选择器的icon图标点击事件
      handleDateIconClick() {
        console.log(111)
        this.showDatePicker=true
        this.inputPicker=false
        // if (this.$refs.timePicker) {
        //   this.$refs.timePicker.focus();
        // } else {
        //   console.error("时间选择器未找到！");
        // }
      },
      //时间选择器的icon图标点击事件
      handleDateChange(value){
        console.log('日期选择器的值已更改:', value);
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .el-input__inner {
    border-radius: 0 !important; //去掉圆角
  }
  .custom-input {
    width: 100%; /* 让输入框宽度占满父容器 */
  }
  .el-input, .el-select {
    width: 200px;
  }
  </style>
  